<fluent-design-system-provider use-defaults background-color="#F7F7F7" corner-radius="10">
    <style>
        fluent-card {
            --card-height: 400px;
            --card-width: 500px;
            padding: 20px;
            margin: 12px;
        }

        .class-override {
            height: 163px;
            width: 300px;
        }

        .state-override {
            --card-width: 350px;
            --card-height: 300px;
            --elevation: 6;
        }

        .state-override:hover {
            --elevation: 12;
        }

        .contents {
            display: flex;
            flex-direction: column;
        }
    </style>
    <div>
        <FluentCard class="state-override">Custom size and elevation on hover using CSS</FluentCard>

        <fluent-design-system-provider background-color="#333333">
            <FluentCard>
                <div class="contents">
                    Dark
                    <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
                    <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
                    <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
                    <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
                </div>
            </FluentCard>
        </fluent-design-system-provider>

        <fluent-design-system-provider background-color="#E5E5E5">
            <FluentCard neutral-base-color="#3995C9">
                <div class="contents">
                    Tinted neutral, light
                    <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
                    <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
                    <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
                    <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
                </div>
            </FluentCard>
        </fluent-design-system-provider>

        <fluent-design-system-provider background-color="#333333">
            <FluentCard neutral-base-color="#3995C9">
                <div class="contents">
                    Tinted neutral, dark
                    <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
                    <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
                    <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
                    <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
                </div>
            </FluentCard>
        </fluent-design-system-provider>

        <fluent-design-system-provider background-color="#333333">
            <FluentCard neutral-base-color="#3995C9">
                <div class="contents">
                    Tinted neutral, dark
                    <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
                    <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
                    <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
                    <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
                </div>
                <FluentCard neutral-base-color="#00A900" style="margin: 0; --card-height: 200px; --card-width: 460px;">
                    <div class="contents">
                        Tinted neutral, nested, dark
                        <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
                        <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
                        <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
                        <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
                    </div>
                </FluentCard>
            </FluentCard>
        </fluent-design-system-provider>

        <FluentCard card-background-color="#2A5193">
            <div class="contents">
                Custom card background color
                <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
                <FluentButton Appearance="Appearance.Stealth">Stealth</FluentButton>
                <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
                <FluentButton Appearance="Appearance.Lightweight">Lightweight</FluentButton>
            </div>
        </FluentCard>
    </div>
</fluent-design-system-provider>